<template>
	<view>
		<l-painter :board="poster" ref="painter" />
	</view>
</template>
<script>
	import {
		formatPrice
	} from '@/utils/tools'
	export default {
		name: "share-csppl-poster",
		props: {
			options: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {};
		},
		computed: {
			poster() {

				return {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '675rpx',
						padding: '30rpx',
						backgroundColor: 'rgba(255, 255, 255, 1)',
						borderRadius: '10rpx',
					},
					views: [{
							css: {
								display: 'flex',
								flexDirection: 'row',
								alignItems: 'center',
								marginBottom: '20rpx',
							},
							type: "view",
							views: [{
								css: {
									width: '80rpx',
									height: '80rpx',
									borderRadius: '50%',
									marginRight: '20rpx'
								},
								src: this.options.avatar,
								type: "image",
							}, {
								css: {
									position: 'fixed',
									top: '30rpx',
									left: '120rpx',
									marginLeft: '20rpx',
									marginBottom: '20rpx',
								},
								type: "view",
								views: [{
									css: {
										width: '100%',
										marginBottom: '40rpx',
									},
									type: "view",
									views: [{
										css: {
											position: 'absolute',
											top: '0',
											left: '0',
											color: 'rgba(38, 38, 38, 1)',
											fontSize: '28rpx',
										},
										text: this.options.user_name,
										type: "text",
									}]
								}, {
									css: {
										display: 'flex',
										alignItems: 'center',
									},
									type: "view",
									views: [{
										type: "view",
										views: [{
											css: {
												color: 'rgba(95, 95, 95, 1)',
												fontSize: '22rpx'
											},
											text: this.$zhTran('向您分享了 '),
											type: "text",
										}]
									}, {
										type: "view",
										views: [{
											css: {
												color: 'rgba(64, 115, 250, 1)',
												fontSize: '22rpx'
											},
											text: this.options.clsp_name,
											type: "text",
										}]
									}, {
										type: "view",
										views: [{
											css: {
												color: 'rgba(95, 95, 95, 1)',
												fontSize: '22rpx'
											},
											text: this.$zhTran(' 的店铺'),
											type: "text",
										}]
									}]
								}]
							}],
						}, {
							css: {
								position: 'relative',
							},
							type: "view",
							views: [{
								css: {
									width: '675rpx',
									height: '675rpx',
								},
								src: this.options.share_image,
								type: "image",
							}]
						},
						{
							css: {
								marginTop: '20rpx',
								width: '100%',
								height: '210rpx',
								padding: '0',
							},
							type: "view",
							views: [{
								css: {
									width: '100%',
									textAlign: 'center',
									marginBottom: '20rpx',
								},
								type: "view",
								views: [{
									css: {
										width: '170rpx',
										height: '160rpx',
									},
									src: this.options.qr_code,
									type: "image",
								}]
							}, {
								css: {
									width: '100%',
									textAlign: 'center',
								},
								type: "view",
								views: [{
									css: {
										color: 'rgba(38, 38, 38, 1)',
										fontSize: '22rpx',
									},
									text: this.$zhTran('扫码查看店铺'),
									type: "text",
								}]
							}]
						},
					]
				}
			},
		},
		methods: {
			drawCanvas() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: "url",
					quality: 1,
					success: (res) => {
						this.$emit("success", res.tempFilePath);
					},
					complete: () => {
						this.$emit("complete");
					},
				});
			},
		},
	};
</script>

<style>

</style>